<template>
    <section>
        <el-menu active-text-color="#fff" background-color="#202741" class="el-menu-vertical-demo" default-active="/home"
            text-color="#a9abb3" router>
            <!-- 上方标题 -->
            <div class="titleContainer">
                <el-icon size="30">
                    <Reading />
                </el-icon>
                <h3>教育管理系统</h3>
            </div>
            <!-- 首页 -->
            <el-menu-item index="/home">
                <template #title>
                    <el-icon size="26">
                        <HomeFilled />
                    </el-icon>
                    <span>首页</span>
                </template>
            </el-menu-item>
            <!-- 课程管理 -->
            <el-menu-item index="/cmt">
                <template #title>
                    <el-icon size="26">
                        <Reading />
                    </el-icon>
                    <span>课程管理</span>
                </template>
            </el-menu-item>
            <!-- 订单管理 -->
            <el-sub-menu index="1">
                <template #title>
                    <el-icon size="26">
                        <List />
                    </el-icon>
                    <span>订单管理</span>
                </template>
                <el-menu-item index="/order">订单</el-menu-item>
                <el-menu-item index="/refund">退款</el-menu-item>
            </el-sub-menu>
            <!-- 用户管理 -->
            <el-sub-menu index="2">
                <template #title>
                    <el-icon size="26">
                        <UserFilled />
                    </el-icon>
                    <span>用户管理</span>
                </template>
                <el-menu-item index="/student">学员</el-menu-item>
                <el-menu-item index="/lecturer">讲师</el-menu-item>
            </el-sub-menu>
            <!-- 咨询管理 -->
            <el-sub-menu index="3">
                <template #title>
                    <el-icon size="26">
                        <ChatLineSquare />
                    </el-icon>
                    <span>咨询管理</span>
                </template>
                <el-menu-item index="/swiper">轮播图</el-menu-item>
                <el-menu-item index="/article">文章</el-menu-item>
            </el-sub-menu>
            <!-- 促销管理 -->
            <el-sub-menu index="4">
                <template #title>
                    <el-icon size="26">
                        <ShoppingBag />
                    </el-icon>
                    <span>促销管理</span>
                </template>
                <el-menu-item index="/flashSaleActivity">秒杀活动</el-menu-item>
                <el-menu-item index="/coupon">优惠券</el-menu-item>
            </el-sub-menu>
            <!-- 系统设置 -->
            <el-sub-menu index="/systemManagement">
                <template #title>
                    <el-icon size="26">
                        <Tools />
                    </el-icon>
                    <span>系统设置</span>
                </template>
            </el-sub-menu>
        </el-menu>
    </section>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import treeify from 'treeify'
</script>

<style scoped lang="less">
section {
    // width: 277.33px;
    height: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    .el-menu-vertical-demo {
        width: 277.33px;
        height: 100%;
        font-size: 24px;
        flex: 1;

        .titleContainer {
            height: 83px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #a9abb3;

            i {
                font-size: 40px;
            }

            h3 {
                height: 100%;
                line-height: 83px;
                margin-left: 10px;
            }
        }
        li {
            box-sizing: content-box;
            padding: 5px 0;
            span {
                margin-left: 10px;
                font-size: 19px;
            }
            ul {
                li {
                    box-sizing: content-box;
                    padding: 11.5px 0;
                    font-size: 16px;
                    text-indent: 20px;
                }
            }
        }
    }
}
</style>